<template lang="pug">
  section.container
    h1.title This page is loaded from the {{ name }}
    h2.info(v-if="name === 'client'") Please refresh the page

    nuxt-link(:to="$i18n.path('')" exact) {{ $t('links.home') }}
    button(@click="toast") toast
    button(@click="prompt") prompt
    button(@click="confirm") confirm
    // p {{option}}
    // base-select(label="ok" :options="[1, 2]" v-model="option")
    icon(name="trip" @click="")
    form(@submit.prevent="test")
      ul
        li(v-for="item in form" :key="item.field")
          .item(v-if="item.form === 'input'")
            base-input(v-bind="item" v-model="model[item.field]")
          .item(v-if="item.form === 'select'")
            base-select(v-bind="item" v-model="model[item.field]")
      input(type="submit")
    .tu-gap
</template>
<script>
import Basic from '~/model/Basic'
import BaseSelect from '~/components/form/select'
import BaseInput from '~/components/form/input'
import Icon from '~/components/icon'
import {
  fetchCategory,
  addCategory,
} from '~/api/test'

export default {
  components: {
    Icon,
    BaseInput,
    BaseSelect,
  },
  asyncData({ req }) {
    return {
      name: req ? 'server' : 'client'
    }
  },
  head() {
    return {
      title: `About Page (${this.name}-side)`
    }
  },
  data () {
    return {
      model: null,
      option: 2
    }
  },
  methods: {
    toast () {
      this.$toast('message')
      .then(() => {
        console.log('done')
      })
    },
    test () {
      Basic.validate(this.model).then(data => {
        console.log({ data })
      }).catch((err) => {
        console.log('Err:  ', err)
      })
    },
    prompt () {
      this.$prompt({
        title: 'ttt',
        placeholder: 'placeholder',
        multiple: true
      }).then(val => {
        console.log(val)
      })
    },
    confirm () {
      this.$confirm({content: 'aer'}).then(val => {
        console.log(val)
      })
    },
  },
  created () {
    this.model = Basic.model
    this.form = Basic.form
  },
  mounted () {
    fetchCategory().then(resp => { console.log(resp) })
    let category = Math.random().toString(36).slice(2, 8)
    addCategory({category}).then(resp => {
      console.log(resp)
    })
  },
  notice: {
    note: {
      title: 'Welcome!',
      msg: 'Hello from nuxt.js',
      bgcolor: '#ccc'
    }
  }
}
</script>

<style scoped>
.title
{
  margin-top: 50px;
}
.info
{
  font-weight: 300;
  color: #9aabb1;
  margin: 0;
  margin-top: 10px;
}
.button
{
  margin-top: 50px;
}

.tu-gap{
  width: 100%;
  height: 50rem;
  background-color: #ccc;
}
</style>
